<template>
    <div class="body download">
        <!--<div class="do_title">APP下载</div>-->
        <div class="shadow" @click="closeshadow()" v-show="ifshadow"></div>

        <div class="do_cen">
            <img class="down_topimg" src="../img/down_top.png" alt="">

            <img class="logo" src="../img/down_logo.png" alt="">

            <img v-show="ifdown" class="broser" src="../img/down_img.png" alt="">
        </div>

        <div class="do_con">
            <p>微金网APP下载</p>

            <div v-if="androidifshow" @click="download()">安卓版本安装</div>

            <div v-if="iosifshow" @click="download()">IOS版本安装</div>

            <dl>
                <dt>ios版本安装教程</dt>
                <dd>①点击下载——安装成功</dd>
                <dd>②完成IOS用户信任教程</dd>
                <dd>
                    ③依次点击手机【设置】—【通用】—<br/>
                    【设备管理】—【选择SIBEREM,OOO】 —<br/>
                    【信任】—用户信任操作完成
                </dd>
            </dl>
        </div>

        <div class="do_btm">
            <p>用户信任流程</p>

            <img src="../img/down_btm.jpg" alt="">
        </div>
    </div>
</template>

<script>
    export default {
        name: "download",
        data(){
            return{
                iosifshow:true,
                androidifshow:true,
                ifdown:false,
                ifshadow:false
            }
        },
        mounted(){
            if(this.common.checksestom()=="iPhone"){
                this.androidifshow = false;
            }else{
                this.iosifshow = false;
            }
        },
        methods:{
            download(){
                if(this.common.checkWechart()){
                    this.ifshadow = true;
                    this.ifdown = true;
                }else{
                    window.location = "http://weijinwang.cn:8004/weijinwang.apk"
                }
            },
            closeshadow(){
                this.ifshadow = false;
                this.ifdown = false;
            }
        }
    }
</script>

<style scoped lang="less">
    .download{

        background:#fff;

        .shadow{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: rgba(0,0,0,0.3);
            z-index: 100;
        }

        .do_title{
            width:7.50rem;
            height:0.74rem;
            background:rgba(58,132,220,1);
            font-size:0.37rem;
            font-family:PingFangSCSemibold-;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height: 0.74rem;
            text-align: center;
        }

        .do_cen{
            height: 5.5rem;
            background: #fff;
            overflow: hidden;
            position: relative;
            .down_topimg{
                width: 6.1rem;
                height: 4.76rem;
                display: block;
                margin: 0.3rem auto;
            }
            .logo{
                width: 2.2rem;
                height: 2.2rem;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -1.1rem;
                margin-top: -1.1rem;
            }
            .broser{
                width: 2.31rem;
                height: 1.08rem;
                position: absolute;
                right: 0.5rem;
                top: 0;
                z-index: 1000;
            }
        }

        .do_con{
            overflow: hidden;
            font-family:PingFangSCSemibold-;
            p{
                font-size:0.37rem;
                font-weight:400;
                color:rgba(0,0,0,1);
                text-align: center;
                margin: 0.3rem auto;
            }

            div{
                width:5.08rem;
                height:0.91rem;
                background:rgba(28,153,250,1);
                border-radius:0.46rem;
                margin: 0 auto;
                text-align: center;
                cursor: pointer;

                font-size:0.36rem;
                font-weight:400;
                color:rgba(255,255,255,1);
                line-height:0.91rem;
                margin: 0.5rem auto;
            }

            dl{
                overflow: hidden;
                padding: 0 0.44rem;
                font-family:SourceHanSansCN-Regular;
                dt{
                    font-size:0.3rem;
                    font-weight:400;
                    color:rgba(1,0,0,1);
                    line-height:0.36rem;
                }
                dd{
                    font-size:0.25rem;
                    font-family:SourceHanSansCN-Light;
                    font-weight:300;
                    color:rgba(0,0,0,1);
                    line-height:36px;
                }
            }
        }

        .do_btm{
            padding: 0.5rem 0.44rem;
            background:#fff;

            p{
                font-size:0.3rem;
                font-family:SourceHanSansCN-Regular;
                font-weight:400;
                color:rgba(1,0,0,1);
                line-height:36px;
                margin-bottom: 0.2rem;
            }

            img{
                width: 6.24rem;
                height: 8.14rem;
            }
        }

    }
</style>
